import Vue from 'vue'
import Vuex from 'vuex'
import { getUserInfoAPI } from '@/api/userAPI.js'
Vue.use(Vuex)

// 初始化state的数据
let initState = {
  // 存放token信息的对象
  tokenInfo: {},
  // 存放用户信息数据
  userInfo: {}
}

const stateStr = localStorage.getItem('state')
if (stateStr) {
  initState = JSON.parse(stateStr)
}

export default new Vuex.Store({
  state: initState,
  mutations: {
    // 更新tokenInfo的数据
    updateTokenInfo(state, payload) {
      state.tokenInfo = payload
      // 触发mutation里的保存token的方法
      this.commit('saveStateToStorage')
    },
    // 将token保存到本地
    saveStateToStorage(state) {
      localStorage.setItem('state', JSON.stringify(state))
    },
    updateUserInfo(state, payload) {
      // 把用户信息存到 state里的userInfo
      state.userInfo = payload
      this.commit('saveStateToStorage')
    },
    // 清空vuex里所有的数据，并更新到本地
    cleanState(state) {
      state.tokenInfo = {}
      state.userInfo = {}
      this.commit('saveStateToStorage')
    }
  },
  actions: {
    // 获取用户信息的action
    async initUserInfo(ctx) {
      // 调用获取用户的接口
      const { data: res } = await getUserInfoAPI()
      if (res.message === 'OK') {
        // action触发mutation的方法updateUserInfo
        ctx.commit('updateUserInfo', res.data)
      }
    }
  },
  getters: {
    userAvator(state) {
      // 定义一个默认的头像地址
      let imgSrc = 'https://img01.yzcdn.cn/vant/apple-1.jpg'
      if (state.userInfo.photo) {
        imgSrc = state.userInfo.photo
      }
      return imgSrc
    }
  },
  modules: {}
})
